<template>
  <div class='question-dialog'>
    <el-dialog title="问题选择" class="m_dialog" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <custom-title title="问题选择"></custom-title>
      <el-form ref="serachMap" class="serach_wrapper flex-space-between" :inline="true" :model="serachMap" @submit.native.prevent>
        <div class="serach">
          <el-form-item prop="keyword" size="small">
            <el-input v-model="serachMap.keyword" placeholder="请输入关键字" clearable @clear="handleSerach()" @keyup.enter.native="getList()" />
          </el-form-item>
          <el-form-item class="flex">
            <el-button @click="handleSerach()" class="btn_primary">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
      <base-table :tableModel="questionList" :tableItemConfig="choiceTableConfig" isSelect @selectionChange="selectionChange">
        <template v-slot:questionInfo="{ scope,item }">
          {{ combineString(scope.row[item.prop]) }}
        </template>
      </base-table>
      <pagination v-if="total>0" :total="total" :page.sync="serachMap.pageNum" :limit.sync="serachMap.pageSize" @change="show" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn_cancel">取 消</el-button>
        <el-button @click="submitForm" type="primary" class="btn_primary">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listExamQuestion } from '@/api/examination'
export default {
  data () {
    return {
      dialogVisible: false,
      // 搜索条件
      serachMap: {
        pageNum: 1,
        pageSize: 5,
      },
      // 考试资料数据
      formData: {},
      // 试卷表单验证规则
      rules: {
        examPaperName: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
        examPassScore: [{ required: true, message: '请输入通过分数', trigger: 'blur' },],
        examDuration: [{ required: true, message: '请输入考试限时（分钟）', trigger: 'blur' },],
      },
      // 选择题表格配置
      choiceTableConfig: [
        {
          label: '题目',
          prop: 'examQuestionContent',
        },
        {
          label: '选项',
          prop: 'questionItemInfo',
          slotName: 'questionInfo'
        }
      ],
      // 选择题列表数据
      questionList: [],
      // 判断题列表数据
      trueOrFalseList: [],
      // 总条数
      total: '',
      // 表格加载
      loading: false,
      // 试卷问题列表
      examPaperQuestionList: []
    };
  },
  computed: {},
  watch: {},
  created () {

  },
  mounted () {

  },
  methods: {
    async show (type) {
      this.loading = true
      this.type = type
      this.getList()

    },
    // 数组转字符串
    combineString (arr) {
      const answerItem = arr.map(item => `${item.itemName}: ${item.itemValue}`)
      const result = answerItem.join(' ')
      return result
    },
    async getList () {
      const response = await listExamQuestion({
        ...this.serachMap,
        questionType: this.type
      })
      if (response.code === 200) {
        this.questionList = response.rows
        this.loading = false
        this.dialogVisible = true
        this.total = response.total
      }
    },
    handleSerach () {
      this.serachMap = {
        pageNum: 1,
        pageSize: 5,
        keyword: undefined
      }
      this.getList()
    },
    // 表格点击数据发生改变
    selectionChange (val) {
      this.examPaperQuestionList = val
    },
    // 提交Form表单
    submitForm () {
      this.$emit('questionChange', this.examPaperQuestionList, this.type)
      this.dialogVisible = false
    },
  },

  components: {
  },
}
</script>

<style lang='less' scoped>
</style>